<template>
  <el-row>
    <el-col :span="24">
      <div>
        <div class="filter-content">
          <div class="filter-item">
            <div class="label-content">
              <select-region class="elliptical-select" v-model="baseTable.tableReqDto.regions" placeholder="卖家归属地" style="width: 200px" />
              <el-input class="search-input-width elliptical-input" v-model.trim="baseTable.tableReqDto.name" clearable placeholder="卖家名称"></el-input>
              <el-button style="margin-left: 20px" :auto-insert-space="true" type="primary" @click="baseTable.onSearch">查询</el-button>
            </div>
          </div>
        </div>
        <el-table class="custom-header-table-2" :data="baseTable.tableData" v-loading="baseTable.tableLoading" stripe style="width: 100%">
          <template v-for="(col,itemindex) in baseTable.tableColumns" :key="col.colKey">
            <el-table-column :header-align="col.align" :align="col.align" :prop="col.colKey" :label="col.title" :width="col.width">
              <template #default="{ row, $index }">
                <!-- 序号列处理 -->
                <template v-if="col.colKey === 'index'">
                  {{ ($index + 1) }}
                </template>

                <template v-if="col.colKey === 'bsAddress'">
                  <div class="text">
                    <bs-address :value="row.bsAddress" />
                  </div>
                </template>
                <template v-else-if="col.colKey === 'reviewsRating'">
                  <div class="text" v-text="'Score：' + row.reviewsCount"></div>
                  <div class="text" v-text="'Ratings：' + row.reviewsRating"></div>
                </template>
                <template v-else-if="col.colKey === 'saleCount'">
                  <div class="text" v-text="row.saleCount"></div>
                  <div class="text">
                    <fixed-amount :value="row.saleVolume" />
                  </div>
                </template>
                <template v-else-if="col.colKey === 'opt'">
                  <div class="table-opt">
                    <el-tooltip effect="dark" content="查看详情" placement="top">
                      <el-link :underline="false" class="opt-item" @click="onToDetail(row)">
                        <el-icon><PieChart /></el-icon>
                      </el-link>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="关注" placement="top">
                      <el-link :underline="false" class="opt-item">
                        <el-icon><Aim /></el-icon>
                      </el-link>
                    </el-tooltip>
                  </div>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <table-pagination :pagination="baseTable.dataPagination" @change="baseTable.onPaginationChange" />
      </div>
    </el-col>
  </el-row>
</template>
<script setup lang="ts">
import SelectRegion from '@/plugins/pair/select-region.vue'

import { sellerSearch } from '@/api/common'
import { Aim, PieChart } from '@element-plus/icons-vue'
import TableNameColumn from '@/plugins/pair/table-name-column.vue'
import FixedAmount from '@/plugins/pair/fixed-amount.vue'
import BsAddress from '@/plugins/pair/bs-address.vue'
import TablePagination from '@/plugins/pair/table-pagination.vue'
import { useDefineTable } from '@/plugins/util/global-variable'
import router from "@/router";
import { onMounted } from 'vue';

const baseTable = useDefineTable({
  tableReqDto: {
    name: '',
    regions: [],
  },
  request: sellerSearch,
  tableColumns: [
    { colKey: 'index', title: '序号', width: '100' },
    { colKey: 'name', title: '卖家名称', width: '200' },
    { colKey: 'bsName', title: '公司名称', align: 'left' },
    { colKey: 'bsAddress', title: '公司地址', align: 'left', width: '260' },
    { colKey: 'type', title: '类型', align: 'center' },
    { colKey: 'status', title: '状态', align: 'center' },
    { colKey: 'status', title: '归属地址', align: 'center' },
    { colKey: 'reviewsRating', title: '评分', align: 'center' },
    { colKey: 'saleCount', title: '30天销售', align: 'center' },
    { colKey: 'productCount', title: '变体数量', align: 'center' },
    { colKey: 'opt', title: '操作', width: '100', align: 'center' },
  ],
})

const onToDetail = (row: any) => {
  router.push({ name: 'seller-detail', query: { id: row.bsId } })
}

onMounted(() => {})
</script>
<style scoped lang="less"></style>
